<template>
	<view>
		<u-sticky>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="sectionChange"></u-tabs>
		</u-sticky>
		<u-card v-if="current == 0">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<view class="u-text-center u-m-t-20 weikaishi3 huanhang">请选择库区</view>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="u-m-20">
					<u-row>
						<u-col span="12" text-align="center">
							<view class="u-m-t-20">
								<checkbox-group @change="checkboxChange" class="checkbox-group">
									<view class="checkbox-item" v-for="(item, index) in arealist" :key="index">
										<checkbox :value="item.name" :checked="item.checked">{{ item.name }}</checkbox>
									</view>
								</checkbox-group>
							</view>
						</u-col>
					</u-row>
				</view>

				<!-- 分隔线 -->
				<view class="divider"></view>

				<!-- 输入数量区域 -->
				<view class="u-m-20">
					<u-row>
						<u-col span="4" text-align="right">
							<view class="u-m-t-20">
								<view class="input-label">下发数量:</view>
							</view>
						</u-col>
						<u-col span="8">
							<view class="u-m-t-20">
								<input type="number" v-model="sendingNum" placeholder="请输入下发数量" class="input-box" />
							</view>
						</u-col>
					</u-row>
				</view>
				
				<view class="divider"></view>
				
				<!-- 新增的下发任务按钮 -->
				<button class="issue-button" @click="issueTask">下发任务</button>
			</view>
		</u-card>
		<u-card v-if="current == 0">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="2" text-align="center">
							<view class=" weikaishi">
								<span>序号</span>
							</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class=" weikaishi">
								<span>库区</span>
							</view>
						</u-col>
						<u-col span="6" text-align="center">
							<view class=" weikaishi">
								<span>拣货单号</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<u-row v-for="(item, index) in dataList" :key="index">
					<u-col span="2" text-align="center">
						<uni-badge size="small" absolute="rightTop" v-if="item.scattered">
							<view class="lanse u-m-t-10 huanhang">
								<span>{{index + 1}}</span>
							</view>
						</uni-badge>
						<view class="lanse u-m-t-10 huanhang" v-else>
							<span>{{ index + 1 }}</span>
						</view>
					</u-col>
					<u-col span="4" text-align="center">
						<uni-badge size="small" :text="item.scattered" absolute="rightTop" type="primary" v-if="item.scattered">
							<view class="u-m-t-10 huanhang">
								<span>{{item.areaName}}</span>
							</view>
						</uni-badge>
						<view class="u-m-t-10 huanhang" v-else>
							<span>{{item.areaName}}</span>
						</view>
					</u-col>
					<u-col span="6" text-align="center">
						<uni-badge size="small" :text="item.scattered" absolute="rightTop" type="primary" v-if="item.scattered">
							<view class="u-m-t-10 huanhang">
								<span>{{item.storageNumber}}</span>
							</view>
						</uni-badge>
						<view class="u-m-t-10 huanhang" v-else>
							<span>{{item.storageNumber}}</span>
						</view>
					</u-col>
					<u-col span="12" text-align="center">
						<view class="jiange">
						</view>
					</u-col>
				</u-row>
			</view>
		</u-card>
		<view style="height: 90rpx;" v-if="current == 0">
		</view>

		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flex: '',
				keyword: '',
				list: [{
						name: '任务下发'
					}
				],
				arealist: [],
				areaName: [], // 存储选中的库区
				sendingNum: '', // 输入的数量
				current: 0,
				dataList: [],
				pageNo: 1, //第几页
				hasMore: true, //是否有下一页
				orderCount: 0, //总共多少条
			}
		},
		onLoad() {
			this.$http.post('/rest/storage/Arealist', {}, {
				params: {},
				header: {
					'Authorization': uni.getStorageSync('token'),
				}
			}).then(res => {
				this.arealist = res.data.data.map(item => ( {
					name: item.areaName,
					orderCnt: item.orderCnt,
					checked: false // 添加checked属性用于复选框
				}))
				console.log(this.arealist)
			})
		},
		onShow() {
			this.refresh()
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current == 0) {
				uni.showLoading({
					title: '加载中'
				})
				if (this.hasMore) {
					this.pageNo++
					setTimeout(() => {
						this.loadOrder({
							condition: this.keyword
						}).then(res => {}) 
						uni.hideLoading()
					}, 500)
				} else {
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '已经到低了哦',
							duration: 2000
						});
					}, 500)
				}
			}
		},
		methods: {
			refresh() {
				if (this.current == 0) {
					this.pageNo = 1
					this.hasMore = true
					this.loadOrder({
					}).then(res => {})
				}
			},
			loadOrder(param = {}) {
				return new Promise((resolve, reject) => {
					param = Object.assign(param, {
						page: this.pageNo,
						palletStorageAreaFlag:"否",
						limit: 20
					})
					this.$http.post('/rest/HxStorageOut/findAppDailingquPageBySpec', {}, {
						params: param,
						header: {
							'Authorization': uni.getStorageSync('token'),
						}
					}).then(res => {
						if (this.pageNo == 1) {
							this.dataList = res.data.data
						} else {
							this.dataList = this.dataList.concat(res.data.data)
						}
						this.orderCount = res.data.count
						this.list[0].name = '任务下发(' + res.data.count + ')'
						this.hasMore = this.pageNo * 20 < res.data.count
						resolve(res)
					})
				})
			},
			sectionChange(e) {
				this.current = e
				uni.showLoading({
					title: '加载中'
				})
				this.refresh()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
			checkboxChange(e) {
				this.areaName = e.detail.value
				console.log('选中的库区:', this.areaName)
			},
			// 新增的下发任务方法
			issueTask() {
				if (this.areaName.length === 0) {
					this.$refs.uToast.show({
						title: '请选择库区',
						type: 'warning'
					})
					return
				}
				if (!this.sendingNum) {
					this.$refs.uToast.show({
						title: '请输入下发数量',
						type: 'warning'
					})
					return
				}
				this.$http.post('/rest/HxStorageOut/taskIssued', {
					areaNameList: this.areaName,
					sendingNum: this.sendingNum
				}, {
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					this.$refs.uToast.show({
						title: '任务下发成功',
						type: 'success'
					})
					this.refresh()
				}).catch(err => {
					this.$refs.uToast.show({
						title: '任务下发失败',
						type: 'error'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-body-item {
		padding: 20rpx 15rpx;
	}

	.wrap {
		padding: 0rpx 12rpx;
	}

	.u-row {
		margin: 10rpx 2rpx;
	}

	.weikaishi2 {
		font-size: 34rpx;
	}

	.weikaishi3 {
		font-size: 30rpx;
	}

	.jiange {
		border-bottom: 1px solid #ebebeb;
	}

	.huanhang {
		word-break: break-all;
	}

	.baise {
		background-color: #2979ff;
		color: #ffffff;
		font-size: 45rpx;
	}

	/* 复选框样式 */
	.checkbox-group {
		display: flex;
		flex-wrap: wrap;
	}

	.checkbox-item {
		width: 50%; /* 设置每个复选框的宽度为50%，这样一行可以放两个 */
		box-sizing: border-box;
		padding: 10rpx;
		text-align: center;
	}

	/* 输入框样式 */
	.input-label {
		font-size: 30rpx;
		color: #333;
		line-height: 60rpx;
	}

	.input-box {
		width: 100%;
		height: 60rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 0 15rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	/* 分隔线样式 */
	.divider {
		width: 100%;
		height: 1px;
		background-color: #ebebeb;
		margin: 20rpx 0;
	}

	/* 新增的按钮样式 */
	.issue-button {
		width: 100%;
		height: 80rpx;
		background-color: #2979ff;
		color: white;
		border: none;
		border-radius: 8rpx;
		font-size: 32rpx;
		margin: 20rpx 0;
	}
</style>